<template>
  <PageContainer>
    <view class="container">
      <Tabs v-model="currentTab" @change="tabsChange">
        <Header title="意向管理">
          <view>
            <TabNav tabBarColor="#2878FF" />
            <RadioTagGroup
              v-model="receivedParams.applyStatus"
              v-if="currentTab === 0"
              :data="receivedTagList"
              @change="handleRefresh"
            />
            <RadioTagGroup
              v-model="sendParams.applyStatus"
              v-if="currentTab === 1"
              :data="sendTagList"
              @change="handleRefresh"
            />
            <view class="py-8 px-16 h-36">
              <TSearch v-model="searchVal" placeholder="搜索供需标题" @clear="handleRefresh" />
            </view>
          </view>
        </Header>
        <TabsItem name="收到的意向" :unread="applyReceiveNum" :value="0">
          <Paglist
            v-model="receivedDataList"
            :is-init-api="false"
            :parame="receivedParams"
            @register="receivedRegister"
            :is-show-loadmore="receivedDataList.length > 1"
            :scroll-top-bottom="200"
          >
            <view class="pa-16">
              <template v-for="(v, i) in receivedDataList" :key="v.id">
                <ReceivedItem
                  :id="v.id"
                  :status="v.applyStatus"
                  :avatar-url="v.avatar"
                  :user-name="v.userName"
                  :company-position-name="v.companyPositionName"
                  :title="v.title"
                  :application-time="v.createTime"
                  :bo-type="v.boType"
                />
              </template>
            </view>
          </Paglist>
        </TabsItem>
        <TabsItem name="发出的意向" :value="1">
          <Paglist
            v-model="sendDataList"
            :is-init-api="false"
            :parame="sendParams"
            @register="sendRegister"
            :is-show-loadmore="sendDataList.length > 1"
            :scroll-top-bottom="200"
          >
            <view class="pa-16">
              <template v-for="(v, i) in sendDataList" :key="v.id">
                <SendItem
                  :id="v.id"
                  :status="v.applyStatus"
                  :title="v.title"
                  :application-time="v.createTime"
                  :bo-type="v.boType"
                />
              </template>
            </view>
          </Paglist>
        </TabsItem>
      </Tabs>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* intentionManage 意向管理 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import { onMounted, provide, reactive, ref } from 'vue';
  import RadioTagGroup, { type TagItem } from '../components/RadioTagGroup.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { onLoad } from '@/router';
  import ReceivedItem from './components/ReceivedItem.vue';
  import SendItem from './components/SendItem.vue';
  import { IntentionStatusEnum } from '@/enums/businessOpportunitiesEnum';
  import { onPageScroll, onShow } from '@dcloudio/uni-app';
  import { IntentionStatusText } from '.';
  import { cloneDeep } from 'lodash-es';
  import TSearch from '@/components/TSearch/index.vue';
  import {
    sendApplyRecord,
    receiveApplyRecord,
    getUserBoApplyReceiveNum,
  } from '@/api/businessOpportunities';
  import type {
    IIntentionApplyRecordData,
    IIntentionApplyRecordResult,
  } from '@/api/businessOpportunities/type';

  const currentTab = ref<number>(0);
  const searchVal = ref<string>('');
  function tabsChange() {
    searchVal.value = '';
    handleRefresh();
  }

  function handleRefresh() {
    if (currentTab.value) {
      sendParams.keyWord = searchVal.value;
      sendRefresh();
    } else {
      receivedParams.keyWord = searchVal.value;
      receivedRefresh();
    }
  }

  const statusTagList: TagItem[] = [
    {
      value: null,
      label: '全部',
    },
    {
      value: IntentionStatusEnum.pending,
      label: IntentionStatusText[IntentionStatusEnum.pending],
    },
    {
      value: IntentionStatusEnum.success,
      label: IntentionStatusText[IntentionStatusEnum.success],
    },
    {
      value: IntentionStatusEnum.unsuitable,
      label: IntentionStatusText[IntentionStatusEnum.unsuitable],
    },
  ];

  // 收到的  ------------------ start ----------------
  const receivedTagList = ref<TagItem[]>([
    ...cloneDeep(statusTagList),
    {
      value: IntentionStatusEnum.hold,
      label: IntentionStatusText[IntentionStatusEnum.hold],
    },
  ]);

  const receivedDataList = ref<IIntentionApplyRecordResult[]>([]);
  const receivedParams = reactive<IIntentionApplyRecordData>({
    applyStatus: receivedTagList.value[0].value,
    keyWord: '',
  });
  const [receivedRegister, { refresh: receivedRefresh }] = useConList({ api: receiveApplyRecord });

  // 收到的  ------------------ end ----------------

  // 发出的 ------------------ start ----------------
  const sendTagList = ref<TagItem[]>(cloneDeep(statusTagList));
  const sendDataList = ref<IIntentionApplyRecordResult[]>([]);
  const sendParams = reactive<IIntentionApplyRecordData>({
    applyStatus: sendTagList.value[0].value,
    keyWord: '',
  });
  const [sendRegister, { refresh: sendRefresh }] = useConList({ api: sendApplyRecord });

  // 发出的 ------------------ end ----------------

  provide('api', void 0);

  onPageScroll(() => {});
  const applyReceiveNum = ref(0);
  onShow(() => {
    handleRefresh();
    queryUserBoApplyReceiveNum();
  });
  const queryUserBoApplyReceiveNum = async () => {
    applyReceiveNum.value = await getUserBoApplyReceiveNum();
    receivedTagList.value[1].num = applyReceiveNum.value;
  };
</script>

<style lang="scss" scoped></style>
